<!--
 * @Project_description: {{routerName}}树
-->
<template>
  <d2-container class='{name}'>
    <avue-tree v-model='form' :data='data' :option='option'
               @node-click='nodeClick' >
    </avue-tree>
  </d2-container>
</template>

<script>
  import { mapActions } from 'vuex'
  // import引入的组件需要注入到对象中才能使用
  export default {
    name: '{{name}}-tree',
    data() {
      // 这里存放数据
      return {
        form: {},
        data: [],
        option: {
          defaultExpandAll: true, //是否展开节点
          filter: true,  //是否显示搜索框
          dialogWidth:'30%',
          menu:false,
          addBtn:false,
          //tree配置
          props: {
            label: '{{name}}Name',
            value: '{{name}}Id',
          },
        },
      }
    },
    created() {
      this.getList()
    },
    // 方法集合
    methods: {
      ...mapActions('tree/{{name}}', ['set','setTree']),
      nodeClick(data) {
        //vuex的{{name}}Id
        this.set(data.{{name}}Id)
      },
      //查询树
      async getList() {
        let req={
        //TODO:请求参数
        }
        //树和list都是空
        let res = await this.$api.{{name}}.tree(req)
        this.data = res.data
        this.setTree(res.data)
      },
    },
  }
</script>

<style lang='scss' scoped>
  //@import url(); 引入公共css类
  .org {
    padding: 0 !important;
  }

  ::v-deep .el-tree {
    background: none !important;

  }
  ::v-deep .el-tree-node__content{
    height: 45px;
  }
  ::v-deep .el-tree-node.is-current > .el-tree-node__content {
    //background-color: rgba(0, 0, 0, 0) !important;

  }
  ::v-deep .d2-container-full{
    border: none !important;
    right:0 !important;
  }
  ::v-deep .d2-container-full__body{
    background: none !important;
  }
</style>
